@use "px-ui/theme-chalk/src/dark/css-vars.scss" as *;

/* 整体暗色风格适配 */
html.dark {
  $border-style: #303030;
  $color-white: #fff;

  /* 自定义深色背景颜色 */
  // --px-bg-color: #020409;

  /* 常用border-color 需要时可取用 */
  --pure-border-color: rgb(253 253 253 / 12%);

  /* switch关闭状态下的color 需要时可取用 */
  --pure-switch-off-color: #ffffff3f;

  .navbar,
  .tags-view,
  .contextmenu,
  .sidebar-container,
  .horizontal-header,
  .sidebar-logo-container,
  .horizontal-header .px-sub-menu__title,
  .horizontal-header .submenu-title-noDropdown {
    background: var(--px-bg-color) !important;
  }

  .app-main {
    background: #020409 !important;
  }

  .logic-flow-view,
  .wangeditor {
    filter: invert(0.9) hue-rotate(180deg);
  }

  /* 标签页 */
  .tags-view {
    .arrow-left,
    .arrow-right {
      border-right: 1px solid $border-style;
      box-shadow: none;
    }

    .arrow-right {
      border-left: 1px solid $border-style;
    }
  }

  /* px-ui */
  .px-table__cell {
    background: var(--px-bg-color);
  }

  .px-card {
    --px-card-bg-color: var(--px-bg-color);

    // border: none !important;
  }

  .px-backtop {
    --px-backtop-bg-color: rgb(72 72 78);
    --px-backtop-hover-bg-color: var(--px-color-primary);

    transition: background-color 0.25s cubic-bezier(0.7, 0.3, 0.1, 1);
  }

  .px-dropdown-menu__item:not(.is-disabled):hover {
    background: transparent;
  }

  /* 全局覆盖px-ui的px-dialog、px-drawer、px-message-box、px-notification组件右上角关闭图标的样式，表现更鲜明 */
  .px-icon {
    &.px-dialog__close,
    &.px-drawer__close,
    &.px-message-box__close,
    &.px-notification__closeBtn {
      &:hover {
        color: rgb(255 255 255 / 85%) !important;
        background-color: rgb(255 255 255 / 12%);
      }
    }
  }

  /* 仿 px-scrollbar 滚动条样式 支持大多数浏览器，如Chrome、Edge、Firefox、Safari等 */
  .pure-scrollbar {
    scrollbar-color: rgb(63 64 66) transparent;

    ::-webkit-scrollbar-thumb {
      background-color: rgb(63 64 66);
    }

    ::-webkit-scrollbar-thumb:hover {
      background: rgb(92 93 96);
    }
  }
}
